
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>HTML <span class="color_h1">图像</span></h1>
<br/>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_result notranslate" style="text-align:center">
<h2>Norwegian Mountain Trip</h2>
<img alt="Pulpit Rock" border="0" decoding="async" src="/images/pulpit.jpg"/></div>
<br/>
<a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<hr/><div class="tryit_ex">
<img alt="Examples" decoding="async" height="46px" src="/images/tryitimg.gif" width="40"/><h2>在线实例</h2>
</div>
<p><a  target="_blank">插入图像</a><br/>
本例演示如何在网页中显示图像。</p>
<p><a  target="_blank">从不同的位置插入图片</a><br/>
本例演示如何将其他文件夹或服务器的图片显示到网页中。</p>
<p>（可以在本页底端找到更多实例。）</p>
<hr/><h2>HTML 图像- 图像标签（ &lt;img&gt;）和源属性（Src）</h2>
<p>在 HTML 中，图像由&lt;img&gt; 标签定义。</p>
<p>&lt;img&gt; 是空标签，意思是说，它只包含属性，并且没有闭合标签。
</p>
<p>要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。</p>
<p><b>定义图像的语法是：</b></p>
<div class="code"><div>


&lt;img src="<i>url</i>" alt="<i>some_text</i>"&gt;


</div></div>
<p>
URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 <a  target="_blank">http://www.runoob.com/images/pulpit.jpg</a>。
</p>
<p>浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
</p>
<hr/><h2>
HTML
图像- Alt属性</h2>
<p>
alt 属性用来为图像定义一串预备的可替换的文本。</p>
<p>
替换文本属性的值是用户定义的。
</p>
<div class="code notranslate"><div>


&lt;img src="boat.gif" alt="Big Boat"&gt;</div></div>
<p>在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。</p>
<hr/><h2>
HTML 图像- 设置图像的高度与宽度</h2>
<p>
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。</p>
<p>
属性值默认单位为像素:</p>
<div class="code notranslate"><div>


&lt;img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"&gt;</div></div>
<p>
<strong>提示:</strong> 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。</p>
<hr/><h2>基本的注意事项 - 有用的提示：</h2>
<p><b>注意:</b> 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
</p>
<p><b>注意:</b> 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。</p>
<hr/><div class="tryit_ex">
<img alt="Examples" decoding="async" height="46px" src="/images/tryitimg.gif" width="40"/><h2>更多实例</h2>
</div>
<p><a  target="_blank">排列图片</a><br/>
本例演示如何在文字中排列图像。</p>
<p><a  target="_blank">浮动图像</a><br/>
本例演示如何使图片浮动至段落的左边或右边。</p>
<p><a  target="_blank">设置图像链接</a><br/>
本例演示如何将图像作为一个链接使用。</p>
<p><a  target="_blank">创建图像映射</a><br/>
本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。</p>
<hr/><h2>HTML 图像标签</h2>
<table class="reference notranslate">
<tbody><tr>
<th align="left">标签</th>
<th align="left">描述</th>
</tr>
<tr>
<td><a >&lt;img&gt;</a></td>
<td>定义图像</td>
</tr>
<tr>
<td><a >&lt;map&gt;</a></td>
<td>定义图像地图</td>
</tr>
<tr>
<td><a >&lt;area&gt;</a></td>
<td>定义图像地图中的可点击区域</td>
</tr>
</tbody></table> <div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    